<style>
  .xb-title{
    color: #a5aab7;
  }
</style>
<section class="pl-24 pr-24 hire-audit pb-10" id="withdrawPlan">
  <h3 class="font-16 border-b pb-10">退租管理-退租详情</h3>
  <!-- 基本信息 -->
  <div class="mt-15 pb-10 hl-global-detail-box">
    <h4 class="font-14 font-wt xb-title">基本信息</h4>
    <div class="hl-row">
      <div class="hl-row-item" style="width: 100%;">
        <div class="title">退租时间：</div>
        <div class="item">{{data.withdrawDate | formatDate}}</div>
      </div>
    </div>
    <div class="hl-row">
      <div class="hl-row-item" style="width: 100%;">
        <div class="title">退租单号：</div>
        <div class="item">{{data.wCode}}</div>
      </div>
    </div>
    <div class="hl-row">
      <div class="hl-row-item">
        <div class="title">状态：</div>
        <div class="item color-orange">{{data.auditState | auditState}}</div>
      </div>
      <div class="hl-row-item">
        <div class="title" v-if="data.auditState == 'WJS'">账单编号：</div>
        <div class="item color-orange" v-if="data.auditState == 'WJS'">
          <a :href="'#/billDetail?id='+billsId +'&ddtab=true&aid='+data.contractId" target="_blank">{{billsno || '--'}}</a>
        </div>
      </div>
    </div>
    <div class="hl-row">
      <div class="hl-row-item">
        <div class="title">合同编号：</div>
        <div class="item">
          <a :href="'#/contractNewDeatil?id='+data.contractId+'&ddtab=true'" target="_blank">{{contratdata.cCode}}</a>
        </div>
      </div>
      <div class="hl-row-item">
        <div class="title">管理编号：</div>
        <div class="item">
          <a :href="'#/contractNewDeatil?id='+data.contractId+'&ddtab=true'" target="_blank">{{contratdata.mCode}}</a>
        </div>
      </div>
    </div>
    <div class="hl-row">
      <div class="hl-row-item" style="width: 100%;">
        <div class="title">合同名称：</div>
        <div class="item">{{contratdata.contractName ? contratdata.contractName : '--'}}</div>
      </div>
    </div>
    <div class="hl-row">
      <div class="hl-row-item" style="width: 100%;">
        <div class="title">租户名称：</div>
        <div class="item">{{contratdata.zlfCompany}}</div>
      </div>
    </div>
  </div>
  <!-- 出租资源 -->
  <div class="rent-resource">
    <h4 class="font-14">出租资源</h3>
    <!-- 单元 -->
    <div v-if="building.length">
      <div class="clearfix line-height-34">
        <div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
        <div class="pull-right cursor" @click="checkDetailMes('unit')">
          <span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
          <span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
          <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
          <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
        </div>
      </div>
      <div class="unit-table" v-if="unitOpenFlag">
        <div class="tb-title dy-flex border-b gradient-color">
          <div class="dy-fx-2">项目</div>
          <div class="dy-fx-2">楼栋</div>
          <div class="dy-fx-1">楼层</div>
          <div class="dy-fx-4">单元</div>
        </div>
        <div class="tb-content">
          <ul class="dy-flex project-cr">
            <li class="dy-fx-2 project">{{contratdata.projectName}}</li>
            <li class="dy-fx-7">
              <!-- 楼栋 -->
              <ul class="dy-flex building-cr" v-for="(item,index) in building">
                <li class="dy-fx-2 building">{{item.buildingName}}</li>
                <li class="dy-fx-5">
                  <!-- 楼层 -->
                  <ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
                    <li class="dy-fx-1 floor">{{item1.floorName}}</li>
                    <li class="dy-fx-4 unit">
                      <!-- 单元 -->
                      <b v-for="(item2,index2) in item1.unit" @click="getUnitDetails(item1.unitId[index2])"><a href="javascript:;">{{item2}}</a><i v-if="index2 + 1 !== item1.unit.length">、</i></b>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 工位 -->
    <div v-if="wp.length">
      <div class="clearfix line-height-34">
        <div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
        <div class="pull-right cursor" @click="checkDetailMes('wp')">
          <span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
          <span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
          <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
          <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
        </div>
      </div>
      <div class="position-table border" v-if="wpOpenFlag">
        <div class="tb-title dy-flex border-b gradient-color">
          <div class="dy-fx-3">项目</div>
          <div class="dy-fx-3">楼栋</div>
          <div class="dy-fx-1">楼层</div>
          <div class="dy-fx-1">单元</div>
          <div class="dy-fx-1">工位数</div>
          <div class="position-item">工位</div>
        </div>
        <ul class="tb-content">
          <li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId" :floorId="item.floorId" :unitId="item.unitId">
            <div class="dy-fx-3">{{contratdata.projectName}}</div>
            <div class="dy-fx-3">{{item.buildingName}}</div>
            <div class="dy-fx-1">{{item.floorName}}</div>
            <div class="dy-fx-1">{{item.unitName}}</div>
            <div class="dy-fx-1">{{item.num}}</div>
            <div class="position-item">
              <span class="position">
                <b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 车位 -->
    <div v-if="st.length">
      <div class="clearfix line-height-34">
        <div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
        <div class="pull-right cursor" @click="checkDetailMes('st')">
          <span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
          <span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
          <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
          <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
        </div>
      </div>
      <div class="position-table border" v-if="stOpenFlag">
        <div class="tb-title dy-flex border-b gradient-color">
          <div class="dy-fx-3">项目</div>
          <div class="dy-fx-3">楼栋</div>
          <div class="dy-fx-1">楼层</div>
          <div class="dy-fx-1">单元</div>
          <div class="dy-fx-1">车位数</div>
          <div class="position-item">车位</div>
        </div>
        <ul class="tb-content">
          <li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId" :floorId="item.floorId" :unitId="item.unitId">
            <div class="dy-fx-3">{{contratdata.projectName}}</div>
            <div class="dy-fx-3">{{item.buildingName}}</div>
            <div class="dy-fx-1">{{item.floorName}}</div>
            <div class="dy-fx-1">{{item.unitName}}</div>
            <div class="dy-fx-1">{{item.num}}</div>
            <div class="position-item">
              <span class="position">
                <b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 应收部分 -->
  <div class="mt-15 pt-10 border-t">
    <h4 class="font-14 font-wt xb-title">应收部分</h4>
    <div class="hire-amount">
      <ul>
        <li class="clearfix line-height-34 color-999" v-if="item.paymentType == 'R'" v-for="item in data.expenses">
          <span class="pull-left mr-10">{{item.name}}：</span>
          <span class="pull-left color-666">{{item.amount | formatNum}}</span> 元
          <b class="ml-10" v-if="item.memo">(备注：{{item.memo}})</b>
        </li>
        <li class="clearfix line-height-34">
          <span class="pull-left mr-10 color-primary">应收合计：</span>
          <span class="pull-left color-primary font-wt">{{data.amountReceived | formatNum}}</span>元
        </li>
      </ul>
    </div>
  </div>
  <!-- 应退部分 -->
  <div class="mt-15 pt-10 border-t">
    <h4 class="font-14 font-wt xb-title">应退部分</h4>
    <div class="hire-amount">
      <ul>
        <li class="clearfix line-height-34 color-999" v-if="item.paymentType == 'W'" v-for="item in data.expenses">
          <span class="pull-left mr-10">{{item.name}}：</span>
          <span class="pull-left color-666">{{item.amount | formatNum}}</span> 元
        </li>
        <li class="clearfix line-height-34">
          <span class="pull-left mr-10 color-primary">应退合计：</span>
          <span class="pull-left color-primary font-wt">{{data.amountRefund | formatNum}}</span>元
        </li>
      </ul>
    </div>
  </div>
  <!-- 费用合计 -->
  <div class="mt-15 pt-10 border-t">
    <h4 class="font-14 font-wt xb-title">费用合计</h4>
    <div class="hire-amount">
      <ul>
        <li class="clearfix line-height-34">
          <span class="pull-left mr-10 color-primary">费用合计：</span>
          <span class="pull-left color-primary font-wt">{{Math.abs(data.amountReceived-data.amountRefund).toFixed(2) | formatNum}}</span>元
          <span v-if="data.amountReceived-data.amountRefund > 0">(应收)</span>
          <span v-if="data.amountReceived-data.amountRefund < 0">(应退)</span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 退租原因 -->
  <div class="mt-15 pt-10 border-t hire-cause">
    <h4 class="font-14 font-wt xb-title">退租原因</h4>
    <div class="hire-amount">
      <div>{{hireCauseActive}}</div>
    </div>
  </div>
  <!-- 待办事项 -->
  <div class="mt-15 pt-10 border-t hire-matter">
    <h4 class="font-14 font-wt xb-title">待办事项</h4>
    <div class="hire-amount">
      <ul class="clearfix">
        <li v-for="(item, key, index) in jsonArr" @click="getFinsh(item, index, $event)" :class="{active: item.split(':')[1] > 1}">
          <input type="checkbox" v-model="matterActive" :value="item.split(':')[0]"> {{item.split(':')[0]}}
        </li>
      </ul>
    </div>
  </div>
  <!-- 存档图片 -->
  <div class="mt-15 pt-10 border-t hire-image">
    <h4 class="font-14 font-wt xb-title">存档图片</h4>
    <ul class="clearfix">
      <li
        v-for="(item, index) in data.pics"
        @click="bigPicShow(data.pics, index)"
      >
        <img :src="item" alt="">
      </li>
    </ul>
  </div>
  <!-- 备注 -->
  <div class="mt-15 pt-10 border-t hire-other pb-10">
    <h4 class="font-14 font-wt xb-title">备注</h4>
    <div class="memo">{{data.memo}}</div>
  </div>
  <!-- 进度更新 -->
  <hl-button type="primary" @on-click="gxProgress" v-if="quanxian.indexOf('c63') > -1">进度更新</hl-button>
  <hl-button type="outline" @on-click="wjc" v-if="quanxian.indexOf('c64') > -1">提交结算</hl-button>
  </div>
  <!-- 单元详情 -->
  <unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>
</section>

<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" charset="utf-8"></script>
<script src="modules/withdraw/scripts/withdraw_plan.js" charset="utf-8"></script>
